<template>
  <div class="searchFor">
    <div class="title">搜索页</div>
    <div class="searchFor-content">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="分词搜索">
          <a-switch v-model="form.delivery" />
        </a-form-model-item>
        <a-form-model-item label="搜索页热词">
          <div class="row-content">
            <a-button @click="showModal">
              添加热词
            </a-button>
            <a-popover placement="bottomLeft">
              <template slot="content">
                <img
                  width="200"
                  src="https://cdn2.weimob.com/saas/@assets/saas-fe-console-retail/@1.250.0/static/images/hotSearchExam.4b1383f8.png"
                  alt=""
                >
              </template>
              <a-button type="link">示例</a-button>
            </a-popover>
            <span class="link-text">热词数量上限为10个，可拖动排序</span>
          </div>
          <div style="margin-top:10px;" class="row-content">
            <a-table :data-source="data" :pagination="false">
              <a-table-column key="age" title="Age" data-index="age" />
              <a-table-column key="address" title="Address" data-index="address" />
              <a-table-column key="tags" title="Tags" data-index="tags">
                <template slot-scope="tags">
                  <span>
                    <a-tag v-for="tag in tags" :key="tag" color="blue">{{ tag }}</a-tag>
                  </span>
                </template>
              </a-table-column>
              <a-table-column key="action" title="Action">
                <template slot-scope="text, record">
                  <span>
                    <a>Action 一 {{ record.firstName }}</a>
                    <a-divider type="vertical" />
                    <a>Delete</a>
                  </span>
                </template>
              </a-table-column>
            </a-table>
          </div>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-modal v-model="visible" title="新建热词" @ok="handleOk">
      <a-form-model :model="modalform" :label-col="{ span: 4 }" :wrapper-col="wrapperCol">
        <a-form-model-item label="关键词">
          <a-input v-model="modalform.keyWords" />
        </a-form-model-item>
        <a-form-model-item label="热词类型">
          <a-radio-group v-model="modalform.type">
            <a-radio value="1">
              关键词搜索商品
            </a-radio>
            <a-radio value="2">
              链接页面
            </a-radio>
          </a-radio-group>
          <a-button v-if="modalform.type=='2'">
            选择链接
          </a-button>
        </a-form-model-item>
        <a-form-model-item label="热词图标">
          <a-radio-group v-model="modalform.icon">
            <a-radio value="1">
              无
            </a-radio>
            <a-radio value="2">
              自定义图标
            </a-radio>
          </a-radio-group>
          <div v-show="modalform.icon=='2'" class="img-upload">
            <div class="default-img">
              <a-empty :image="simpleImage" :description="false" />
            </div>
            <div class="upload-btn">
              <a-button>
                选择图片
              </a-button>
              <div class="text-notice-info">建议尺寸:100px*100px</div>
            </div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="热词样式">
          <a-checkbox v-model="modalform.checkbox" name="type">
            高亮
          </a-checkbox>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import { Empty } from 'ant-design-vue'
const data = [
  {
    key: '1',
    firstName: 'John',
    lastName: 'Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: '2',
    firstName: 'Jim',
    lastName: 'Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser']
  },
  {
    key: '3',
    firstName: 'Joe',
    lastName: 'Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  }
]

export default {
  data() {
    return {
      data,
      form: {},
      labelCol: { span: 3 },
      wrapperCol: { span: 14 },
      visible: false,
      modalform: {},
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
    }
  },
  mounted() {
    this.rowDrop()
  },
  methods: {
    rowDrop() {
      const tbody = document.querySelector('.ant-table-tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.data.splice(oldIndex, 1)[0]
          _this.data.splice(newIndex, 0, currRow)
        }
      })
    },
    showModal() {
      this.visible = true
    },
    handleOk() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.searchFor{
  padding: 20px 5px;
  .title{
    color: #595961;
    font-size: 16px;
    padding: 0 0 20px 0 ;
  }
  .searchFor-content{
    background: #F2F2F6;
    border-radius: 10px;
    padding: 10px;
    ::v-deep{
      .ant-table-tbody{
        background: #fff;
      }
    }
  }
}
.img-upload{
  display: flex;
  align-items: center;
  .default-img{
    width: 100px;
  }
  .text-notice-info{
    white-space: nowrap;
  }
}
</style>
